<template>
  <div class="container">
    <el-table
      :data="
        applyingInfo.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
      style="width: 95%; margin: auto"
      align="center"
    >
      <el-table-column
        prop="name"
        label="门店名"
        align="center"
      ></el-table-column>
      <el-table-column prop="phone" label="电话" align="center">
      </el-table-column>
      <el-table-column prop="time" label="营业时间" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column prop="score" label="评分" align="center">
      </el-table-column>
      <el-table-column prop="describe" label="门店描述" align="center">
      </el-table-column>
      <el-table-column label="状态" align="center">
        <el-button type="info" size="mini">申请中</el-button></el-table-column
      >
      <!-- <el-table-column prop="name" label="操作"> </el-table-column> -->
    </el-table>
    <!-- 分页 -->
    <div class="block" style="margin-top: 10px">
      <el-pagination
        ref="info"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import { mapGetters } from "vuex";
export default {
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页条数
      total: 0, // 总条数
    };
  },
  computed: {
    applyingInfo() {
      return this.$store.getters["applying/setApplyInfo"];
    },
  },
  // 挂载完成后
  mounted() {
    this.$store.dispatch("applying/getApplyingAction").then(() => {
      this.total = this.applyingInfo.length;
    });
  },
  methods: {
    // 分页功能
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
.container {
  margin: 40px auto;
}
/* 分页 */
.container .el-pagination {
  margin: 20px 0 0 25px;
}
</style>